import React, { useState } from 'react'
import { LoopOutline } from 'antd-mobile-icons'
import { ResultPage, Card, Switch } from 'antd-mobile'
import { CalendarPickerView } from 'antd-mobile'
import { Popup, Space, Button } from 'antd-mobile'
import dayjs from 'dayjs'
function Index() {
    const [visible5, setVisible5] = useState(false)
    const max = new Date()
    max.setDate(10)
    max.setMonth(max.getMonth() + 1)
    const val = dayjs().format('YYYY-MM-DD')
    return (
        <div>
            <ResultPage
                status=''
                title='火车票预订'
                description='便捷购票，服务你的每一次出行'
            >
                <ResultPage.Card style={{ padding: 8 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', height: '35px' }}>
                        <span>北京</span>    <LoopOutline />   <span>北京</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', height: '35px' }}>
                        <span>
                            <span onClick={() => {
                                setVisible5(true)
                            }}>{localStorage.getItem('date')}</span>
                        </span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', height: '35px' }}>
                        <span>
                            只看高铁动车
                        </span>
                        <Switch />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', height: '35px' }}>
                        <Button block color='primary' size='middle'>
                            查询
                        </Button>
                    </div>
                </ResultPage.Card>

                <Card style={{ height: 128, marginTop: 12 }}>搭配 Card 使用</Card>
            </ResultPage>


            <Popup
                visible={visible5}
                onMaskClick={() => {
                    setVisible5(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    minHeight: '40vh',
                    
                }}
            >
                <CalendarPickerView 
                min={dayjs().format('YYYY-MM-DD')}
                max={max}
             onChange={(value) => {
                console.log(value)
              let pp=  dayjs(value).format('YYYY-MM-DD')
              console.log(pp);
              value=pp
              localStorage.setItem('date',pp)
              setVisible5(false)
             }
             }
                />
            </Popup>
        </div>
    )
}

export default Index
